<template>
  <div class="aside-acontainer">
    <el-tabs
      tab-position="left"
      style="height: 532px; box-sizing: border-box"
      type="border-card"
      v-model="activeName"
    >
      <el-tab-pane name="first">
        <span slot="label" class="tab-pane-label">
          <i class="el-icon-discount"></i> 目录
        </span>
        目录
      </el-tab-pane>
      <el-tab-pane>
        <span slot="label" class="tab-pane-label">
          <i class="el-icon-menu"></i> 模块
        </span>
        <AllModules></AllModules>
      </el-tab-pane>
      <el-tab-pane>
        <span slot="label" class="tab-pane-label" @click="checkTemplate">
          <i class="el-icon-edit-outline"></i> 模板
        </span>
      </el-tab-pane>
      <el-tab-pane>
        <span slot="label" class="tab-pane-label">
          <i class="el-icon-magic-stick"></i> 排版 </span
        >排版
      </el-tab-pane>
      <el-tab-pane>
        <span slot="label" class="tab-pane-label">
          <i class="el-icon-upload"></i> 导出 </span
        >
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import AllModules from '@/components/Modules/AllModules.vue'
export default {
  data() {
    return {
      activeName: 'first',
    }
  },
  methods: {
    checkTemplate() {
      this.$router.push({
        name: 'templates',
      })
    },
  },
  components: {
    AllModules,
  },
}
</script>

<style scoped lang="less">
.aside-acontainer {
  height: 100%;
  margin-top: 60px;
}
.el-tabs {
  background-color: rgb(22, 25, 30);
  color: rgb(120, 134, 154);
  // border:none;
}
.tab-pane-label {
  line-height: 60px;
}
/deep/ .el-tabs__item {
  height: 60px;
  color: rgb(120, 134, 154);
  background-color: rgb(40, 47, 57);
}

/deep/ .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
  background-color: rgb(22, 25, 30);
  color: rgb(120, 134, 154);
  border: none;
}
/deep/ .el-tabs--border-card > .el-tabs__header {
  background-color: rgb(40, 47, 57);
}

/deep/ .el-tabs--left.el-tabs--border-card .el-tabs__header.is-left {
  border: none;
}
/deep/ .el-tabs--left.el-tabs--border-card .el-tabs__item.is-left.is-active {
  border: none;
}
</style>
